<script setup lang="ts">
import { ref } from 'vue'
import radioCell from '@/components/radio-cell.vue'

const emit = defineEmits(['close'])
const show = ref(false)
defineExpose({
  show,
})

const editRef = ref()
const formModel = ref({
  name: '',
  price: '',
  coin: '',
})
const wxlist = [
  {
    label: '微信',
    value: '1',
  },
  {
    label: '支付宝',
    value: '2',
  },
]
const zfblist = [
  {
    label: '微信',
    value: '1',
  },
  {
    label: '支付宝',
    value: '2',
  },
]

function handleSubmit() {
  editRef.value.validate().then(({ valid, errors }) => {
    if (valid) {
      console.log('表单验证通过')
      // 提交表单逻辑
      emit('close', false)
      show.value = false
    }
    else {
      console.log('表单验证不通过')
    }
  })
}
function handleClose() {
//   show.value = false

}
</script>

<template>
  <wd-popup v-model="show" lock-scroll position="bottom" :safe-area-inset-bottom="true" closable custom-style="height: 80%;overflow: hidden;" @close="handleClose">
    <view class="wot-form-title">
      【 设备＞软件配置 】
    </view>
    <scroll-view scroll-y>
      <wd-form ref="editRef" :model="formModel">
        <wd-cell-group border>
          <wd-input
            v-model="formModel.name"
            label="设备编号："
            label-width="100px"
            prop="name"
            clearable
            readonly
          />
          <wd-input
            v-model="formModel.price"
            label="设置编号："
            label-width="100px"
            prop="price"
            clearable
            placeholder="0"
          />
          <view class="wot-tips">
            自定义编号，以便确认机器号
          </view>
          <wd-input
            v-model="formModel.coin"
            label="设备名称："
            label-width="100px"
            prop="coin"
            clearable
            placeholder="请输入设备名称"
          />
          <wd-input
            v-model="formModel.coin"
            label="投放地址："
            label-width="100px"
            prop="coin"
            clearable
            placeholder="请输入投放地址"
          />
        </wd-cell-group>
        <radio-cell
          label-width="100px"
          title="支付开关："
        >
          <wd-radio-group
            v-model="formModel.coin" shape="dot" inline
          >
            <wd-radio value="1">
              开启
            </wd-radio>
            <wd-radio value="2">
              关闭
            </wd-radio>
          </wd-radio-group>
        </radio-cell>

        <radio-cell title="支付界面：" label-width="100px">
          <wd-radio-group v-model="formModel.coin" shape="dot" inline>
            <wd-radio value="1">
              投币界面 (支付即投币)
            </wd-radio>
            <wd-radio value="2">
              购币界面 (先购, 后投)
            </wd-radio>
          </wd-radio-group>
        </radio-cell>
        <view class="wot-tips">
          配置默认进入的界面
        </view>
        <radio-cell title="会员投币：" label-width="100px">
          <view>
            <wd-radio-group v-model="formModel.coin" shape="dot" inline>
              <wd-radio value="1">
                开启
              </wd-radio>
              <wd-radio value="2">
                关闭
              </wd-radio>
            </wd-radio-group>
          </view>
        </radio-cell>
        <view class="wot-tips">
          玩家可充值到会员余币，多次使用
        </view>
        <radio-cell title="支付单位：" label-width="100px">
          <view>
            <wd-radio-group v-model="formModel.coin" shape="dot" inline>
              <wd-radio value="1">
                元
              </wd-radio>
              <wd-radio value="2">
                分（测试）
              </wd-radio>
            </wd-radio-group>
          </view>
        </radio-cell>
        <radio-cell title="信号类型：" label-width="100px">
          <wd-radio-group v-model="formModel.coin" shape="dot" inline>
            <wd-radio value="1">
              脉冲 (默认)
            </wd-radio>
            <wd-radio value="2">
              计时 (NO-开/NC-关)
            </wd-radio>
            <wd-radio value="3">
              计时 (NC-开/NO-关)
            </wd-radio>
          </wd-radio-group>
        </radio-cell>
        <view class="wot-tips">
          脉冲为常规投币 / 计时为其它定时开关
        </view>
        <wd-input
          v-model="formModel.coin"
          label="付多少钱："
          label-width="100px"
          prop="coin"
          clearable
          placeholder="请输入金额"
          :rules="[{ required: true, message: '金额不能为空' }]"
        />
        <wd-input
          v-model="formModel.coin"
          label="多少数量："
          label-width="100px"
          prop="coin"
          clearable
          placeholder="请输入数量"
          :rules="[{ required: true, message: '数量不能为空' }]"
        />
        <wd-input
          v-model="formModel.coin"
          label="数量单位："
          label-width="100px"
          prop="coin"
          clearable
          placeholder="请输入数量单位"
        />
        <view class="wot-tips">
          提示: ￥1 元 / 1
        </view>
        <wd-input
          v-model="formModel.coin"
          label="一币几分："
          label-width="100px"
          prop="coin"
          clearable
          placeholder="请输入数量单位"
        />
        <view class="wot-tips">
          协助换算,不显示: ￥1元 = 1  = 0 分
        </view>
        <wd-picker
          v-model="formModel.coin"
          label="微信收款："
          placeholder="请选择收款方式"
          label-width="100px"
          prop="promotion"
          :columns="wxlist"
        />
        <wd-picker
          v-model="formModel.coin"
          label="支付宝收款："
          placeholder="请选择收款方式"
          label-width="100px"
          prop="promotion"
          :columns="zfblist"
        />
        <view class="wot-radio-group">
          <view class="wot-group-title">
            绑定门店：
          </view>
          <wd-radio-group v-model="formModel.coin" shape="dot" inline>
            <wd-radio v-for="item in 5" :key="item" :value="item">
              上海和平路{{ item }}
            </wd-radio>
          </wd-radio-group>
        </view>
        <view class="wot-radio-group">
          <view class="wot-group-title">
            绑定标签分组（最多3个）：
          </view>
          <wd-radio-group v-model="formModel.coin" shape="dot" inline>
            <wd-radio v-for="item in 5" :key="item" :value="item">
              上海和平路{{ item }}
            </wd-radio>
          </wd-radio-group>
        </view>
        <view class="wot-radio-group">
          <view class="wot-group-title">
            绑定支付套餐（最多15个）：
          </view>
          <wd-radio-group v-model="formModel.coin" shape="dot" inline>
            <wd-radio v-for="item in 5" :key="item" :value="item">
              上海和平路{{ item }}
            </wd-radio>
          </wd-radio-group>
        </view>
        <view class="wot-radio-group">
          <view class="wot-group-title">
            支付界面金额项显示配置：
          </view>
          <wd-radio-group v-model="formModel.coin" shape="dot" inline style="text-align: left;line-height: 10px;">
            <wd-radio v-for="item in 5" :key="item" :value="item">
              上海和平路{{ item }}
            </wd-radio>
          </wd-radio-group>
        </view>
        <wd-textarea
          v-model="formModel.coin"
          label="设备信息："
          label-width="80px"
          type="textarea"
          inputmode="text"
          :maxlength="300"
          auto-height
          show-word-limit
          placeholder="请输入活动细则信息"
          clearable
          prop="content"
        />
        <radio-cell title="礼品统计：" label-width="100px">
          <wd-radio-group v-model="formModel.coin" inline shape="dot">
            <wd-radio value="1">
              开启 (需接线及配置＞进销存)
            </wd-radio>
            <wd-radio value="2">
              关闭 (无统计)
            </wd-radio>
          </wd-radio-group>
        </radio-cell>
        <view class="desc">
          <view class="font-bold">
            收款说明 ：
          </view>
          <view>
            1.对私收款：钱直接进商家自有个人账号（由商家自行控制）<br>
            2.测试商户：100元/用户/天，50笔/用户/天，最高10元/每笔<br>
            3.认证商户：800元/用户/天，100笔/用户/天，最高50元/每笔
          </view>
        </view>
        <view class="btn-outer-pd">
          <wd-button type="primary" size="small" block @click="handleSubmit">
            提交
          </wd-button>
        </view>
      </wd-form>
    </scroll-view>
  </wd-popup>
</template>

<style lang="scss" scoped>
.desc{
    padding: 40rpx 20rpx;
    line-height: 40rpx;
    font-size: 24rpx;
    color: #ED6A0C;
}

:deep() {
  .wd-collapse-item__body{
    padding-top: 0;
    padding-bottom: 0;
  }
  .wd-collapse-item::after{
    background:none;
  }
  .wd-drop-menu__list {
    box-shadow: 0 2px 12px rgba(100,101,102,.12);
  }
  .wd-collapse-item__body {
    padding-top:0;padding-bottom:0;
  }
  .wd-collapse-item__header {
    border-top: 1px dashed #ececec;
    padding: 5px;
    margin: 10px 10px 0;
  }
  .wd-collapse-item,.wd-collapse-item__header.is-expanded::after,.wd-collapse-item::after{
    background:none;
  }
}
</style>
